<!doctype html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	 <!-- // <script src="http://img.mukewang.com/down/540812440001e40e00000000.js" type="text/javascript"></script> -->
	 <script type="text/javascript" src="../jquery-2.1.1.js"></script>
	<title>domManip</title>
</head>
<body>
<div id='foo'>Hello</div>
<button id="test1">jquery.buildFragment生成文档碎片</button>
<button id="test2">模拟jquery.buildFragment生成文档碎片</button>

<script type="text/javascript">

var $newdiv1 = $('<div id="object1"/>'),
	newdiv2 = document.createElement('div'),
	existingdiv1 = document.getElementById('foo');


	var rxhtmlTag = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi;
	var wrapMap = {
		// Support: IE 9
		option: [1, "<select multiple='multiple'>", "</select>"],
		thead: [1, "<table>", "</table>"],
		col: [2, "<table><colgroup>", "</colgroup></table>"],
		tr: [2, "<table><tbody>", "</tbody></table>"],
		td: [3, "<table><tbody><tr>", "</tr></tbody></table>"],
		_default: [0, "", ""]
	};
	// Support: IE 9
	wrapMap.optgroup = wrapMap.option;
	wrapMap.tbody    = wrapMap.tfoot = wrapMap.colgroup = wrapMap.caption = wrapMap.thead;
	wrapMap.th       = wrapMap.td;


	function buildFragment(elems, context) {
		var elem, tmp, tag, wrap, contains, j,
			fragment = context.createDocumentFragment(),
			nodes = [],
			i = 0,
			l = elems.length;

		//筛选出不同类型的节点
		for (; i < l; i++) {
			elem = elems[i];

			if (elem || elem === 0) {
				if (jQuery.type(elem) === "object") {
					// 如果是jQuery对象
					// 如果是普通元素对象加[elem]
					// 取出ele放入nodes数组中
					jQuery.merge(nodes, elem.nodeType ? [elem] : elem);
					// 没有html结构，是一个文本节点
				} else if (!/<|&#?\w+;/.test(elem)) {
					nodes.push(context.createTextNode(elem));
				} else {
					//创一个元素div做为容器
					tmp = tmp || fragment.appendChild(context.createElement("div"));
					tag = (/<([\w:]+)/.exec(elem) || ["", ""])[1].toLowerCase();
					//ie对字符串进行trimLeft操作，其余是用户输入处理
					//很多标签不能单独作为DIV的子元素
					//td,th,tr,tfoot,tbody等等,需要加头尾
					wrap = wrapMap[tag] || wrapMap._default;
					tmp.innerHTML = wrap[1] + elem.replace(rxhtmlTag, "<$1></$2>") + wrap[2];

					// Descend through wrappers to the right content
					// 因为warp被包装过
					// 需要找到正确的元素父级
					j = wrap[0];
					while (j--) {
						tmp = tmp.lastChild;
					}
					// Support: QtWebKit
					// jQuery.merge because push.apply(_, arraylike) throws
					// 把节点拷贝到nodes数组中去
					jQuery.merge(nodes, tmp.childNodes);
				}
			}
		}
		i = 0;
		while ((elem = nodes[i++])) {
			fragment.appendChild(elem)
		}
		return fragment;
	}



$('#test1').click(function() {
	"<table><tbody><tr><td>慕课网</td></tr></tbody></table>"
	$('body').append($newdiv1, [newdiv2, existingdiv1, '<td>慕课网</td>', '文本', '<script>alert(1)'])
})

$('#test2').click(function() {
	//6中类型的数据结构
	//这里不设计script的执行
	var fragment = buildFragment([$newdiv1, newdiv2, existingdiv1, '<td>慕课网</td>', '文本', '<script>alert(1)'], document)
	document.body.appendChild(fragment)
})



</script>
</body>
</html>